<template>
    <div class="checkItem-view">

      <div>

        <div class="checkbox">

          <span>治疗检查项</span>
        </div>


        <template>
          <el-table
            ref="multipleTable"
            :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                        'text-align':'center'
                    }"
            :cell-style="{'text-align':'center'}"
            :data="datas"
            @selection-change="handleSelectionChange"
            @select-all="selectAll"
            border
            style="width: 100%">
            <el-table-column
              v-if="type == 1 || type == 2"
              type="selection"
              :selectable="selectable"
              width="50">
            </el-table-column>
            <el-table-column
              prop="check_item_name"
              label="检查项名称">
            </el-table-column>
            <el-table-column
              prop="price"
              label="单价"
              width="100">
              <template slot-scope="scope">
                <span>¥{{scope.row.price.toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="check_item_number"
              label="数量"
              width="150">
              <template slot-scope="scope">
                <el-input v-if="type == 2" v-model="scope.row.refundNum" placeholder="请输入数量" @input="(val)=>{inputChange(val,scope.$index)}"></el-input>
                <span v-else>{{scope.row.check_item_number}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="amount"
              label="金额"
              width="100">
              <template slot-scope="scope">
                <span v-if="type == 2" class="price">¥{{(scope.row.price*scope.row.refundNum).toFixed(2)}}</span>
                <span v-else class="price">¥{{scope.row.amount.toFixed(2)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>

    </div>
</template>

<script>
    export default {
        name: "checkItem",
        model:{
            prop:'selection',
            event:'change'
        },
        props:{
            datas:Array,
            method:{
                type:Number,
                default:1,
            },
            type:{
                type:Number,
                default:0,
            }
        },
        data:function () {
            return{
                tableData: [],
                checked:false,
                multipleSelection: [],
                allSelect:false,
                refundNum:0,
            }
        },
        mounted:function(){
            // for (let i = 0; i < this.data.details.length; i++){
            //     let num = this.data.details[i].number
            //     this.data.details[i].refundNum = num;
            // }
            if (this.type == 1){
                this.$refs.multipleTable.toggleAllSelection();
                // this.datas.forEach(row => {
                //     this.$refs.multipleTable.toggleRowSelection(row);
                // });
            }
        },
        methods:{
            handleSelectionChange:function(val) {
                this.multipleSelection = [];
                for (let i = 0; i < val.length; i++){
                    let a = {...val[i]}
                    this.multipleSelection.push(a);
                }
                // console.log(this.multipleSelection)
                this.$emit("dataChange",this.multipleSelection)
            },
            selectable:function (item) {

                return this.type == 2;
            },
            selectAll:function (val) {
                if (this.type == 1){
                    this.allSelect = !this.allSelect
                    this.$emit("dataChange",this.allSelect?this.datas:[])
                }
            },
            inputChange:function (val,index) {
                let str = val+'';
                str=str.replace(/[^\d]/g,0)

                if (str <=0){
                    str = 1;
                }
                if (str > this.datas[index].check_item_number){
                    str = this.datas[index].check_item_number
                }
                this.datas[index].refundNum = str;

                for (let i = 0; i < this.multipleSelection.length; i++){
                    if (this.multipleSelection[i].ID == this.datas[index].ID){
                        this.multipleSelection[i].refundNum = this.datas[index].refundNum;
                        this.$emit("dataChange",this.multipleSelection)
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/payOrDrug/checkItem.scss";
</style>
